<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增申请开票')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-invoice-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">发票类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('work_invoice_type')}">
                    <input type="radio" th:id="${'invoiceType_' + dict.dictCode}" name="invoiceType"
                           th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${'invoiceType_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">发票抬头：</label>
            <div class="col-sm-8">
                <input name="invoiceTitle" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开哪个公司：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('work_invoice_company')}">
                    <input type="radio" th:id="${'invoiceCompany_' + dict.dictCode}" name="invoiceCompany"
                           th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${'invoiceCompany_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">客户名称：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input type="text" class="form-control" name="customerName" id="customerName" required>
                    <input name="customerId" id="customerId" type="hidden">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label  is-required">开票内容：</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="invoiceContent" required>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">开票金额(不含税)：</label>
            <div class="col-sm-8">
                <input id="invoicePrice" name="invoicePrice" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">税点(%)：</label>
            <div class="col-sm-8">
                <input id="taxPoint" name="taxPoint" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">含税金额：</label>
            <div class="col-sm-8">
                <input id="taxPrice" class="form-control" type="text" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">客户还款：</label>
            <div class="col-sm-8">
                <input name="payback" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">税务登记证号：</label>
            <div class="col-sm-8">
                <input name="taxNo" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">基本开户银行：</label>
            <div class="col-sm-8">
                <select name="bankNo" class="form-control m-b" th:with="type=${@dict.getType('work_bank')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">开户银行账号：</label>
            <div class="col-sm-8">
                <input name="bankAccount" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">合同：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('work_yes_no')}">
                    <input type="radio" th:id="${'isContract_' + dict.dictCode}" name="isContract"
                           th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${'isContract_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">合同收集日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="contractDate" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">注册场所地址：</label>
            <div class="col-sm-8">
                <input name="registerAddress" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">注册场所电话：</label>
            <div class="col-sm-8">
                <input name="registerTel" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">凭证：</label>
            <div class="col-sm-8">
                <input type="hidden" name="uploadFile">
                <div class="file-loading">
                    <input class="form-control file-upload" id="uploadFile" name="file" type="file">
                </div>
            </div>
        </div>
        <input type="hidden" name="params[ids]" id="ids">

        <div class="form-group">
            <label class="col-sm-3 control-label">其它要求：</label>
            <div class="col-sm-8">
                <textarea name="remark" class="form-control"></textarea>
            </div>
        </div>
        <div class="row">
            选择要开票的稿件
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </form>

    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="paperSearch">
                <div class="select-list">
                    <ul>
                        <li>
                            稿件类型：<select name="paperType" th:with="type=${@dict.getType('work_paper_type')}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                        </li>

                        <li>
                            稿件名称：<input type="text" name="paperName"/>
                        </li>
                        <li>
                            <label>媒体名称：</label>
                            <input type="text" name="mediaName"/>
                        </li>
                        <li>
                            <label>客户名称：</label>
                            <input type="text" name="customerName"/>
                        </li>
                        <!--<li>
                            <label>日期范围：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>-->
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search('paperSearch','paper-table')"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$('#paperSearch')[0].reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success" onclick="insertRow()"><i class="fa fa-plus"></i> 批量选择</a>
                            <a class="btn btn-success" onclick="removeRow()"><i class="fa fa-plus"></i> 批量撤销</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="paper-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-suggest-js"/>
<script th:inline="javascript">
    var prefix = ctx + "work/invoice"
    var paperDatas = [[${@dict.getType('work_paper_type')}]];
    var priceDatas = [[${@dict.getType('work_price_type')}]];
    $("#form-invoice-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var ids = $.table.selectColumns("paperId");

            if (ids.length == 0) {
                $.modal.alertWarning("请至少选择一条要开票的稿件");
                return;
            }
            $("#ids").val(ids.join(","));
            $.operate.save(prefix + "/add", $('#form-invoice-add').serialize());
        }
    }

    $("input[name='contractDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true,
        showPreview: false
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
    var testBsSuggest = $("#customerName").bsSuggest({
        url: "/work/customer/query",
        showBtn: false,
        idField: "customerId",
        keyField: "customerName",
        effectiveFields: ["customerId", "customerName", "companyName", "createTime"],
        effectiveFieldsAlias: {customerId: "ID", customerName: "客户名称", companyName: "公司名称", createTime: "登记时间"},
        showHeader: true
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword) {
        console.log('onSetSelectValue: ', keyword.id);
        $("#customerId").val(keyword.id);
    }).on('onUnsetSelectValue', function (e) {
        console.log("onUnsetSelectValue");
    });

    /* 新增表格行 */
    function insertRow() {

        var row = $("#paper-table").bootstrapTable('getSelections');
        $(row).each(function (i, r) {
            if ($("#bootstrap-table").bootstrapTable('getRowByUniqueId', r.paperId) == null)
                $("#bootstrap-table").bootstrapTable('append', r);
        });
    }

    function removeRow() {


        var ids = $.table.selectColumns("paperId");

        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $("#bootstrap-table").bootstrapTable('remove', {
            field: 'paperId',
            values: ids
        })

    }

    function queryParams(params) {
        debugger
        var search = $.table.queryParams(params);
        search.paperType = $("#paperSearch [name='paperType']").val();
        search.paperName = $("#paperSearch [name='paperName']").val();
        search.mediaName = $("#paperSearch [name='mediaName']").val();
        search.customerName = $("#paperSearch [name='customerName']").val();

        /*search.params = {};
        search.params["beginPrice"] = $("#mediaSearch [name='beginPrice']").val();
        search.params["endPrice"] = $("#mediaSearch [name='endPrice']").val();*/
        return search;


    }

    function commonSearch() {

    }

    $(function () {
        var options = {
            url: ctx + "work/paper/invoicelist/0",
            id: "paper-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "稿件管理",
            columns: [{
                checkbox: true
            },
                {
                    field: 'paperId',
                    title: '稿件ID'

                },
                {
                    field: 'paperType',
                    title: '业务类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(paperDatas, value);
                    }
                },
                {
                    field: 'paperName',
                    title: '稿件名称'
                },
                {
                    field: 'customerName',
                    title: '客户名称'
                },
                {
                    field: 'mediaName',
                    title: '媒体名称'
                },
                {
                    field: 'mediaCreate',
                    title: '媒介'
                },
                {
                    field: 'publishLink',
                    title: '刊登链接'
                },
                {
                    field: 'publishDate',
                    title: '刊登时间'
                },
                {
                    field: 'priceType',
                    title: '价格类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(priceDatas, value);
                    }
                },
                {
                    field: 'paperPrice',
                    title: '总价'
                },
                {
                    field: 'actualPrice',
                    title: '计划总价'
                },

                {
                    field: 'words',
                    title: '字数'
                },
                {
                    field: 'remark',
                    title: '备注'
                },
                {
                    field: 'createTime',
                    title: '登记时间'
                }
            ]
        };
        $.table.init(options);
        var options = {
            id: "bootstrap-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            uniqueId: "paperId",
            modalName: "稿件管理",
            columns: [{
                checkbox: true
            },
                {
                    field: 'paperId',
                    title: '稿件ID'

                },
                {
                    field: 'paperType',
                    title: '业务类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(paperDatas, value);
                    }
                },
                {
                    field: 'paperName',
                    title: '稿件名称'
                },
                {
                    field: 'customerName',
                    title: '客户名称'
                },
                {
                    field: 'mediaName',
                    title: '媒体名称'
                },
                {
                    field: 'mediaCreate',
                    title: '媒介'
                },
                {
                    field: 'publishLink',
                    title: '刊登链接'
                },
                {
                    field: 'publishDate',
                    title: '刊登时间'
                },
                {
                    field: 'priceType',
                    title: '价格类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(priceDatas, value);
                    }
                },
                {
                    field: 'paperPrice',
                    title: '总价'
                },
                {
                    field: 'actualPrice',
                    title: '计划总价'
                }


            ]
        };
        $.table.init(options);

        $('#taxPoint').on/*bind*/("input propertychange", function () {
            $('#taxPrice').val(parseFloat( $("#invoicePrice").val() * $(this).val() / 100)+parseFloat($("#invoicePrice").val()));
            //这里写你的处理代码
        });
    });
</script>
</body>
</html>